<script setup lang="ts">
import { collectGood, cancelCollectGood } from '@/api/search'
import request from '@/config/axios'
import * as _ from 'lodash'
import { nextTick, reactive, ref, computed } from 'vue'
import { defineProps } from 'vue'
import cssIconfont from '@/components/collect-icon/index'
let props = defineProps({
  image: {
    type: String
  },
  isCollect: {
    type: Boolean
  },
  item: {
    type: Object
  },
  textWidth: {
    type: Number,
    default: 90
  },
  enableCollect: {
    type: Boolean,
    default: true
  },
  enableShare: {
    type: Boolean,
    default: true
  },
  enableNavigate: {
    type: Boolean,
    default: true
  },
  codeVisibility: {
    type: Boolean,
    default: true
  },
  detail_url: {
    type: String,
    default: ''
  },
  collect_url: {
    type: String,
    default: ''
  },
  cancel_collect_url: {
    type: String,
    default: ''
  }
})
let iconFontSize = ref('40px')
let loadding = ref([])
const style = reactive({
  fontSize: '20px'
})
const handleTapCollect = _.debounce((item) => {
  if (loadding[item.id]) {
    return
  }
  loadding[item.id] = true
  // todo 代优化

  if (item.is_collected) {
    request.delete({
      url: `${props.cancel_collect_url}/${item.id}`,
      params: {
        goods_id: item.id
      }
    }).then((r) => {
      item.is_collected = false
    })
      .finally(() => {
        nextTick(() => {
          delete loadding[item.id]
        })
      })
  } else {
    request.post({
      url: `${props.collect_url}`,
      params: {
        goods_id: item.id
      }
    })
      .then((r) => {
        item.is_collected = true
      })
      .finally(() => {
        nextTick(() => {
          delete loadding[item.id]
        })
      })
  }
}, 500)

const goDetail = (item) => {
  if (props.enableNavigate) {
    uni.navigateTo({
      url: `${props.detail_url}?id=${item.id}`
    })
  }
}

const createItemKvListByItem = computed(() => {
  let kvList = []
  kvList.push(`名称：${props.item.name}`)
  if (props.codeVisibility) {
    kvList.push(`型号：${props.item.code}`)
  } else {
    kvList.push(``)
  }

  return kvList
})
</script>

<template>
  <div class="item">
    <div class="top" @tap="goDetail(props.item)">
      <up-image :showMenuByLongpress="false" :src="props.item.image" mode="aspectFill" height="260rpx" width="100%"></up-image>
    </div>

    <view class="info handle-text-overflow">
      <view class="flex">
        <view class="left handle-text-overflow">
          <template v-for="kvItem in createItemKvListByItem">
            <view class="kvItem handle-text-overflow">
              {{ kvItem.replace('null', '') }}
            </view>
          </template>

        </view>
        <!--  #ifdef  H5 -->
        <view class="right" @tap.native.stop="handleTapCollect(props.item)">
          <MidIcon :width="iconFontSize" :height="iconFontSize" :name="isCollect ? 'star1' : 'star0-fill'"
            class="right-content" />
        </view>
        <!--  #endif -->

        <!--  #ifdef  MP-WEIXIN -->
        <view class="right" @tap.native.stop="handleTapCollect(props.item)" v-if="enableCollect">
          <div class="right-content">
            <cssIconfont :isCollect="props.isCollect"></cssIconfont>
          </div>
        </view>
        <!--  #endif -->
      </view>
    </view>
  </div>
</template>

<style scoped lang="scss">
.svg-class {
  width: 20rpx;
  height: 20rpx;
  font-size: 20rpx;
}

.item {
  width: 100%;
  border-radius: 10rpx;
  overflow: hidden;
  display: grid;
  grid-template-rows: 260rpx 100rpx;
  /* 上下两部分 */
}

.top {
  height: 260rpx;
  overflow: hidden;
}

.info {
  width: 100%;
  height: 100rpx;
  font-size: 24rpx;
  //display: inline-block;
  background-color: black;
  display: flex;
  justify-content: center;
  align-content: center;

  .flex {
    box-sizing: border-box;
    //border: 10rpx solid black;
    padding: 12rpx;
    display: flex;
    width: 100%;
    color: white;
    background-color: black;
    flex-direction: row;
  }

  .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .kvItem {
      font-size: 20rpx;
    }
  }

  .right {
    width: 60rpx;
    position: relative;

    .right-content {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
